<template>
	<view>
		<!-- 搜索框 -->
		<search></search>

		<!-- 顶部标签 -->
		<scroll-view scroll-x class="top-label" enable-flex :scroll-into-view="nid" scroll-with-animation>
			<view v-for="(item,index) in VideoLabel" :key="item.id" @click="click_label(item.id)"
				:id="'label-'+item.id">
				<view :class="{ 'activation':'label-'+item.id==nid }">
					<text>{{item.name}}</text>
				</view>
			</view>
		</scroll-view>


		<!-- 视频 -->
		<view class="video">
			<view class="video-item">
				<image class="video-img"
					src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
				</image>
				<view class="video-body">
					<text class="title">全网都在找的婚礼紫衣伴娘，真人在这里！</text>
					<view class="content">
						<view>
							<image
								src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
							</image>
							<text>小洁保证音乐</text>
						</view>
						<text>2.2万</text>
					</view>
				</view>
			</view>
			<view class="video-item">
				<image class="video-img"
					src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
				</image>
				<view class="video-body">
					<text class="title">全网都在找的婚礼紫衣伴娘，真人在这里！</text>
					<view class="content">
						<view>
							<image
								src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
							</image>
							<text>小洁保证音乐</text>
						</view>
						<text>2.2万</text>
					</view>
				</view>
			</view>
			<view class="video-item">
				<image class="video-img"
					src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
				</image>
				<view class="video-body">
					<text class="title">全网都在找的婚礼紫衣伴娘，真人在这里！</text>
					<view class="content">
						<view>
							<image
								src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
							</image>
							<text>小洁保证音乐</text>
						</view>
						<text>2.2万</text>
					</view>
				</view>
			</view>
			<view class="video-item">
				<image class="video-img"
					src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
				</image>
				<view class="video-body">
					<text class="title">全网都在找的婚礼紫衣伴娘，真人在这里！</text>
					<view class="content">
						<view>
							<image
								src="https://p2.music.126.net/SGD1b-rku41Lj0QATboFrw==/109951166258366024.jpg?param=140y140">
							</image>
							<text>小洁保证音乐</text>
						</view>
						<text>2.2万</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				nid: 'label--1', // 当前点击的标签id
			};
		},
		methods: {
			...mapActions('video', ['GetVideoLabel']),
			...mapMutations('search', ['setSearch']),

			// 点击标签回调
			click_label(id) {
				this.nid = `label-${id}`
			}
		},
		onLoad() {
			this.GetVideoLabel().then(value => {
				this.nid = `label-${value.id}`
			})
		},
		computed: {
			...mapState('video', ['VideoLabel'])
		},
		onShow() {
			this.setSearch('')
		}
	}
</script>

<style lang="scss">
	.top-label {
		display: flex;
		margin: 20rpx 0;
		height: 50rpx;
		white-space: nowrap;

		view {
			display: flex;
			align-items: center;
			height: 100%;
			color: #fff;
			font-size: 24rpx;
			opacity: 0.9;
			margin-right: 20rpx;
		}

		.activation {
			border-bottom: 8rpx #de2e25 solid;
		}
	}

	.video {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		text {
			color: #fff;
		}

		.video-item {
			width: 49%;
			margin-right: 1%;
			margin-bottom: 20rpx;

			.video-img {
				width: 100%;
				border-radius: 20rpx 20rpx 0 0;
			}

			.video-body {
				background-color: #2b2b2b;
				border-radius: 0 0 20rpx 20rpx;
				padding: 20rpx;

				.title {
					font-size: 28rpx;
					margin-top: 30rpx;
				}

				.content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;

					view {
						display: flex;
						align-items: center;

						image {
							height: 40rpx;
							width: 40rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						text {
							opacity: 0.8;
							font-size: 25rpx;
						}
					}

					text {
						opacity: 0.7;
						font-size: 25rpx;
					}
				}
			}
		}
	}
</style>
